/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form,  Input ,InputNumber,Radio,TreeSelect,Select,Collapse,Button,message,Card,Icon,Row,Col} from 'antd';
import {connect} from 'dva';
import './index.less'
import request from '@/utils/request';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const Panel = Collapse.Panel;
const { TextArea } = Input;
let uuid=1;
class EditUserArchives extends Component {
  constructor(props) {
    super(props);
    this.state = {
      meterArr:[],
    };
  }


  componentDidMount() {
    const that=this;
    const meterArr=[];
    for(let i=0;i<this.props.editRecord.length;i++){
      meterArr.push(i+1)
    }
    this.setState({
      meterArr:meterArr,
      uuid:this.props.editRecord.length+1
    })
    uuid=this.props.editRecord.length

  }
  addMeter=()=>{
    uuid++;
    this.state.meterArr.push(uuid)
    this.setState({
      meterArr:this.state.meterArr,
    })
  }
  deleteMeter=(item)=>{
    console.log('删除的item',item)
    const index=this.state.meterArr.indexOf(item);
    console.log('index',index)
    this.state.meterArr.splice(index, 1);
    this.setState({
      meterArr:this.state.meterArr
    })
  }
  renderTreeNodes=(data)=>{
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode value={`${item.id}$${item.name}`} title={item.name} key={item.id} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return  <TreeNode value={item.id}  title={item.name} key={item.id} />
    });
  }
  render() {
    const formItemLayoutWithLabel2 = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 18},
      }
    };
    const {getFieldDecorator, getFieldValue} = this.props.form;
    const that=this
    const meterForms=this.state.meterArr.map((item,index)=>{
      return (
        <Col  span={24} key={index}>
        <Card className={'events-card'}  size="small"
               style={{marginBottom:'10px'}}
               title={<div>事务-{index+1}  <Button onClick={(e)=>{e.stopPropagation();that.deleteMeter(item)}}
                                                                                   size="small" style={{float:'right',marginRight:'10px'}} type="danger">删除</Button>  </div>}
               key={item.toString()} >
          <Form key={index}>
            <FormItem
              label={'事务内容'}
              {...formItemLayoutWithLabel2}
            >
              {getFieldDecorator(`meter_number-${item}`, {
                initialValue:this.props.editRecord[item-1]?this.props.editRecord[item-1].content:'',
                rules: [{required: true, message:"事务内容不能为空"}],
              })(
                <TextArea   rows={2}/>
              )}
            </FormItem>
            <FormItem
              label={'事务状态'}
              {...formItemLayoutWithLabel2}
            >
              {getFieldDecorator(`billing_status-${item}`, {
                initialValue:this.props.editRecord[item-1]?this.props.editRecord[item-1].type:'-1',
                rules: [{required: true, message:""}],
              })(
                <Select >
                  {
                    [{key:'-1',value:'未完成'},{key:'1',value:'已完成'}].map((item,index)=>{
                      return <Option key={index} value={item.key}>{item.value}</Option>
                    })
                  }
                </Select>
              )}
            </FormItem>

          </Form>
        </Card>
        </Col>
      )
    })
    return (
      <div>
        {meterForms}
        <Button block  type={'primary'} icon={'plus'} onClick={this.addMeter}>添加事务</Button>
      </div>
    );
  }
}

const EditUserArchivesFormWrap = Form.create()(EditUserArchives);
export default connect()(EditUserArchivesFormWrap);
